<!--
 * @Description: 
 * @Author: charles
 * @Date: 2020-11-03 14:04:56
 * @LastEditors: charles
 * @LastEditTime: 2021-08-01 14:08:37
-->
<template>
  <div class="details">
    <!-- 标题开始 -->
    <h2 style="text-align:center">{{data.name}}</h2>
    <!-- 标题结束 -->
    <!-- 项目详情开始 -->
    <div class="wrapper" v-html="data.details"></div>
    <!-- 项目详情结束 -->
    <!-- 报名按钮开始 -->
    <el-button type="primary" plain @click="toApply(data.id)" style="margin-left:50%">报名</el-button>
    <!-- 报名按钮结束 -->
  </div>
</template>
<script>
import {get} from '../utils/request'
export default {
  data(){
    return{
      id:'',
      data:{},
    }
  },
  methods:{
    // 跳转报名页面
    toApply(id){
      this.$router.push({path:'/apply',query:{id:id}})
    },
    // 查询项目的详细信息
    findProjectDetails(){
      get('/index/project/findById?id='+this.id).then((res)=>{
        if(res.status == 200){
          this.data = res.data
        }else{
          this.$message({
            type:'error',
            message:res.message
          })
        }
      })
    }
  },
  created(){
    // 拿到从上一个页面传过来的id值
    this.id = this.$route.query.id
    // 调用查询project详情的方法
    this.findProjectDetails()
  },
}
</script>
<style lang="scss" scope>
  .details{
    .wrapper{
      width:70%;
    }
  }
</style>